<template>
  <div class="box">
    <div class="BoxTop">
      <el-input placeholder="请输入操作管理员" v-model="admin" clearable> </el-input>
      <el-button type="primary" class="el-icon-search" @click="handleAll">查找</el-button>
    </div>
    <div class="BoxMiddle">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="admin" label="操作管理员" width="180" align="center">
        </el-table-column>
        <el-table-column prop="ip" label="IP地址" width="180" align="center">
        </el-table-column>
        <el-table-column prop="updateTime" label="操作时间" align="center">
        </el-table-column>
        <el-table-column prop="type" label="操作类别" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1" class="lvl">安全操作</span>
            <span v-if="scope.row.type == 2" class="hongl">危险操作</span>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作动作" align="center"> </el-table-column>
        <el-table-column prop="status" label="操作状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == true" class="lvz">成功</span>
            <span v-if="scope.row.status == false" class="hongz">失败</span>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="操作结果" align="center"> </el-table-column>
        <el-table-column prop="comment" label="备注信息" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="BoxBottom">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="obj.currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="obj.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="obj.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getLog } from "@/api/xitongguanli/log.js";
export default {
  data() {
    return {
      // 输入框
      admin: "",
      // 表格数据
      tableData: [],
      // 分页
      obj: {
        page: 1,
        limit: 20,
        total: null,
        currentPage: 1,
      },
    };
  },
  methods: {
    handleAll() {
      getLog({
        page: this.obj.page,
        limit: this.obj.limit,
        name: this.admin,
        sort: "add_time",
        order: "desc",
      }).then((res) => {
        this.tableData = res.data.list;
        this.obj.total = res.data.total;
        console.log(res.data, "222222");
      });
    },
    // 分页
    handleSizeChange(val) {
      this.obj.limit = val;
      this.handleAll();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.obj.page = val;
      this.handleAll();
      console.log(`当前页: ${val}`);
    },
  },
  mounted() {
    this.handleAll();
  },
};
</script>

<style scoped lang="scss">
.box::v-deep {
  width: 98%;
  padding: 1%;
  .BoxTop {
    width: 40%;
    display: flex;
  }
  .BoxMiddle {
    margin: 20px 0;
    .lvl {
      display: inline-block;
      width: 70px;
      height: 24px;
      background: #e8f4ff;
      border-color: #d1e9ff;
      color: #1890ff;
      border-radius: 4px;
    }
    .lvz {
      display: inline-block;
      width: 40px;
      height: 24px;
      background-color: #e7faf0;
      border-color: #d0f5e0;
      color: #13ce66;
      border-radius: 4px;
    }
    .hongz {
      display: inline-block;
      width: 40px;
      height: 24px;
      background: #e8f4ff;
      border-color: #d1e9ff;
      color: #1890ff;
      border-radius: 4px;
    }
  }
}
</style>
